import React, { Component } from 'react'
import {Form,Input,Button,message} from 'antd'
import http from '../../api'
import './index.css'

const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 12 },
};
const tailLayout = {
wrapperCol: { offset: 8, span: 8 },
};

export default class Login extends Component {
    onFinish = (e)=>{
        http.Login(e).then(()=>{
            this.props.history.replace('/usercenter')
        })
    }
    onFinishFailed = (e)=>{
        // console.log(e);
        message.error('用户名/密码不能为空！')
    }
    render() {
        return (
            <div className="login_bg">
                <div className="login_container">
                    <div className="login_form">
                        <h2>试题管理登录</h2>
                        <Form
                            {...layout}
                            style={{margin:'50px auto'}}
                            name="basic"
                            layout="horizontal"
                            onFinish={this.onFinish}
                            onFinishFailed={this.onFinishFailed}
                        >
                        <Form.Item
                            label="Username"
                            name="username"
                            rules={[{ required: true, message: 'Please input your username!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="Password"
                            name="password"
                            rules={[{ required: true, message: 'Please input your password!' }]}
                        >
                            <Input.Password visibilityToggle={false} />
                        </Form.Item>

                        <Form.Item {...tailLayout}>
                            <Button type="primary" htmlType="submit">
                            Submit
                            </Button>
                        </Form.Item>
                        </Form>
                    </div>
                </div>
            </div>
        )
    }
}
